|
思路分析：当我使用layui默认的下拉搜索框的时候，layui会默认渲染出一个HTML结构，所以我把渲染出来的这个结果直接给复制出来，这样css的样式就不用从头到尾写一遍了，
前端代码（我用的是jsp）：
Insert title here
搜索选择框
立即提交
重置
layui.use(['form', 'jquery','layer'], function(){
var form = layui.form
var $=layui.$;
var layer=layui.layer;
var oldValue=null;
$(".search_input").keyup(function(event){
//alert(event.keyCode)
//layer.msg(event.keyCode);
if(event.keyCode==40){ //方向健↓
//如果是最后一个则不用做任何事情
if($(this).parent().next("dl").children(":last").hasClass("layui-this")){
return;
}
$(this).parent().next("dl").find("dd.layui-this").removeClass("layui-this").next("dd").addClass("layui-this");
$dl=$(this).parent().next("dl");
$dl.scrollTop($dl.scrollTop()+$dl.find("dd.layui-this").height());
return;
}
if(event.keyCode==38){ //方向健↑
//如果是第一个则不用做任何事情
if($(this).parent().next("dl").children(":first").hasClass("layui-this")){
return;
}
$(this).parent().next("dl").find("dd.layui-this").removeClass("layui-this").prev("dd").addClass("layui-this");
$dl=$(this).parent().next("dl");
$dl.scrollTop($dl.scrollTop()-$dl.find("dd.layui-this").height());
return;
}
if(event.keyCode==13){ //按回车键给文本框赋值
$(this).val($(this).parent().next("dl").find("dd.layui-this").html());
oldValue=$(this).val().trim();
return;
}
if(oldValue!=$(this).val().trim()){ //如果输入框的值没有改变就没必要发送ajax请求
//根据用户输入的内容发送ajax请求查询以此内容开头的商品简码，从而查出符合要求的商品名字
$.get("product/getProductsByCode",{"productCode":$(this).val()},function(data){
if(!!data){
//清除掉以前的值
$(".searchDiv dl.layui-anim").html("");
for(var i=0;i |